<template>
  <div class="warehouse flex">
    <!-- 侧边栏组件 -->
    <!-- <Aside></Aside>
    <div :class="store.state ? 'bodyw1' : 'bodyw'"> -->
    <!-- 导航栏组件 -->
    <!-- <Nav></Nav> -->
    <div class="bodybox">
      <el-form :model="form" inline>
        <el-form-item label="型号">
          <el-select v-model="form.model" class="m-2" placeholder="Select">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="用户">
          <el-select v-model="form.user" class="m-2" placeholder="Select">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="" size="normal">
          <el-button type="primary" @click="refresh">刷新</el-button>
          <el-button type="primary">导出</el-button>
          <el-button type="primary" @click="handleEX()">出库</el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="table"
        :data="List"
        border
        stripe
        height="80vh"
        @expand-change="expandChange"
        @row-click="tableRowClick"
        row-key="id"
        :expand-row-keys="tableExpand"
      >
        <el-table-column type="expand">
          <template #default="props">
            <el-table
              :ref="
                (el) => {
                  embedded_table[props.row.id] = el;
                }
              "
              class="embedded_table"
              max-height="35vh"
              :data="props.row.WarehouseDetailed"
              stripe
              row-key="product_id"
              @select="selectEX"
            >
              <el-table-column type="selection" width="55" reserve-selection />
              <el-table-column label="Model" prop="model" show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                label="Purchase"
                prop="purchaseNmar"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                label="PurchasePrice"
                prop="purchase_price"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                label="ExpectedPrice"
                prop="expected_price"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                label="Quantity"
                prop="quantity"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                label="Remarks"
                prop="remarks"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                label="CreateDate"
                prop="create_date"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column fixed="right" label="Operations" width="120">
                <template #default="{ row }">
                  <el-button
                    link
                    type="primary"
                    size="small"
                    @click="handleIM(row)"
                  >
                    IM
                  </el-button>
                  <el-button
                    link
                    type="primary"
                    size="small"
                    @click="handleEX(row)"
                  >
                    EX
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column label="model" prop="model" show-overflow-tooltip />
        <el-table-column
          label="create_user"
          prop="create_user"
          show-overflow-tooltip
        />
        <el-table-column label="total" prop="total" show-overflow-tooltip />
        <el-table-column label="occupy" prop="occupy" show-overflow-tooltip />
        <el-table-column
          label="available"
          prop="available"
          show-overflow-tooltip
        />
        <el-table-column
          label="create_time"
          prop="create_time"
          show-overflow-tooltip
        />
        <el-table-column fixed="right" label="Operations" width="120">
          <template #default="{ row }">
            <el-button link type="primary" size="small" @click="handleIM(row)">
              IM
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          v-model:current-page="pageNo"
          :page-size="pageSize"
          :page-sizes="[10, 20, 30, 40]"
          layout="total,sizes, prev, pager, next"
          :total="total"
          :background="false"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- </div> -->
    <ex-warehouse
      ref="EX"
      @refresh="refresh"
      @deleteEXlist="deleteEXlist"
    ></ex-warehouse>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive, watch, nextTick } from "vue";
import { useDemoStore } from "../../pinia/index";
import * as api from "../../api2/index";
import ExWarehouse from "./components/EX_warehouse.vue";
const store = useDemoStore();
let token = useDemoStore().token; //token
const form = reactive({}); //筛选表单
const List = ref([]); //列表
const total = ref(0); //列表总数
const pageNo = ref(1); //当前页数
const pageSize = ref(20); //分页大小
const management = () => {
  //获取库存列表数据
  api
    .management({
      token,
      pageNo: 1,
      pageSize: 20,
      model: "",
      purchase: [],
    })
    .then((res) => {
      List.value = res.data.data;
      total.value = res.data.total;
    });
};
const handleSizeChange = (val) => {
  //改变分页尺寸
  pageNo.value = 1;
  pageSize.value = val;
  management();
};
const handleCurrentChange = (val) => {
  //翻页
  pageNo.value = val;
  management();
};
const refresh = () => {
  //刷新
  pageNo.value = 1;
  EXlist.value = [];
  tableExpand.value = [];
  management();
};

const tableExpand = ref([]); //table行key组
const tableRowClick = (row, column, event) => {
  //点击table可以正常折叠
  expandChange(row);
};
const embedded_table = ref([]); //存放明细表的ref们
const EXlist = ref([]); //存放勾选的出库数据
const expandChange = (row, expandedRows) => {
  //折叠行时触发的函数，勾选已有的出库数据
  let arr = tableExpand.value.filter((item) => {
    return item == row.id;
  });
  if (arr.length == 0) {
    tableExpand.value.push(row.id);
  } else {
    tableExpand.value = tableExpand.value.filter((item) => {
      return item != row.id;
    });
  }
  nextTick(() => {
    if (embedded_table.value[row.id]) {
      EXlist.value.forEach((item) => {
        embedded_table.value[row.id].toggleRowSelection(item, true);
      });
    }
  });
};
const selectEX = (selection, row) => {
  //明细勾选的时候触发，添加或去除出库数据
  let arr = selection.filter((item) => {
    return item == row;
  });
  if (arr.length == 0) {
    EXlist.value = EXlist.value.filter((item) => {
      return item != row;
    });
  } else {
    EXlist.value.push(row);
  }
};
const deleteEXlist = (row) => {
  //删除一条出库数据
  EXlist.value = EXlist.value.filter((item) => {
    return item != row;
  });
  embedded_table.value.forEach((item) => {
    if (item) {
      item.toggleRowSelection(row, false);
    }
  });
};

const EX = ref();
const handleEX = (row) => {
  //出库
  console.log(EXlist.value);
  console.log(row);
  if (row) {
    EX.value.show([row]);
  } else {
    EX.value.show(EXlist.value);
  }
};

const options = [];
onMounted(() => {
  management();
});
</script>
<style lang="less" scoped>
.warehouse {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  background-color: #f1f1f1;
  overflow: hidden;
  .bodyw {
    width: 87.5%;
    transition: 0.3s ease;
  }
  .bodyw1 {
    width: 95%;
    transition: 0.3s ease;
  }
  .bodybox {
    width: 100%;
    box-sizing: border-box;
    height: 91vh;
    padding: 0px 16px;
    .pagination {
      display: flex;
      justify-content: center;
      /deep/ .el-pagination button {
        background-color: transparent;
      }
      /deep/ .el-pager li {
        background-color: transparent;
      }
    }
    .embedded_table {
      margin: 0px 5%;
      width: 90%;
      ::v-deep .el-table__header-wrapper .el-checkbox {
        // display: none;//设置不成功，页面卡顿
        visibility: hidden;
      }
    }
  }
}
</style>
